<template>
  <div class="base-container">
    <div class="secondary-notification">
      <t-tabs  @change="changeTab" v-model="tabValue">
        <t-tab-panel v-for="(tab, tabIndex) in TAB_LIST" :key="tabIndex" :value="tab.value" :label="tab.label">
          <t-list v-if="data.length > 0" class="secondary-msg-list" :split="true">
            <t-list-item v-for="(item, index) in data" :key="index" @click="setRead(item.id)">
              <p  :class="['title', { unread: item.isRead === '0' }]" >
                {{ item.title }}
              </p>
              <p :class="['content', { unread: item.isRead === '0' }]">
                {{ item.content }}
              </p>
              <p :class="[{ unread: item.isRead === '0' }]">
                <t-tag size="small" theme="primary" variant="light">
                  {{ item.serviceName }}
                </t-tag>
              </p>

              <template #action>
                <span class="msg-date">{{ item.createTime }}</span>
                <div class="msg-action">
                  <t-tooltip
                    class="set-read-icon"
                    :overlay-style="{ margin: '6px' }"
                    :content="item.isRead ==='0' ? '设为已读' : '设为未读'"
                  >
                    <span class="msg-action-icon" v-if="item.isRead==='0'" @click="setRead(item.id)">
                      <t-icon name="queue"  size="16px"/>
                    </span>
                    <span v-else class="msg-action-icon" @click="setUnRead(item.id)">
                      <t-icon name="chat" size="16px"/>
                    </span>
                  </t-tooltip>
                </div>
              </template>
            </t-list-item>
          </t-list>
          <div v-else class="secondary-msg-list__empty-list">
            <p>暂无通知</p>
          </div>
        </t-tab-panel>
        <t-pagination v-model="current" :showPageSize="false" @change="onPageChange" :total="total" :page-size.sync="pageSize"  />
      </t-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "message",
  data() {
    return {
      // NOTIFICATION_TYPES,
      total: 0,
      current: 1,
      pageSize: 10,
      TAB_LIST: [
        {
          label: '全部通知',
          value: 'msgData',
        },
        {
          label: '未读通知',
          value: 'unreadMsg',
        },
        {
          label: '已读通知',
          value: 'readMsg',
        },
      ],
      // prefix,
      data: [],
      dataRead: [],
      dataUnRead: [],
      tabValue: 'msgData',
      visible: false,
      selectedItem: undefined,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isRead: '0'
      },
    };
  },
  created() {
    this.queryParams.isRead = null;
    this.getList();
  },
  methods: {
    onPageChange(pageInfo){
      this.queryParams.pageNum = pageInfo.current;
      this.getList();
    },
    changeTab(value){
      this.data = [];
      if(value === 'msgData'){
        this.queryParams.isRead = null;
      }else if(value === 'unreadMsg'){
        this.queryParams.isRead = "0"
      }else {
        this.queryParams.isRead = "1"
      }
      this.current = 1;
      this.getList();
    },
    getList() {
      this.$api.system.message.list(this.queryParams).then(response => {
        this.data = response.rows;
        this.total = response.total;
      }).catch((e) => {
        // this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    setRead(id) {
      this.$api.system.message.setRead(id).then(response => {
        const index = this.data.findIndex((val) => val.id === id)
        if (index !== -1) {
          this.$set(this.data[index], "isRead", "1")
        }
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    setUnRead(id) {
      this.$api.system.message.setUnRead(id).then(response => {
        const index = this.data.findIndex((val) => val.id === id)
        if (index !== -1) {
          this.$set(this.data[index], "isRead", "0")
        }
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
@import '@/style/variables.less';

.secondary-notification {
  background-color: var(--td-bg-color-container);
  border-radius: @border-radius;
  padding: @spacer-3 @spacer-4;

  .t-tabs__content {
    padding-top: 0;
  }
}

.secondary-msg-list {
  height: 70vh;

  .t-list-item {
    cursor: pointer;
    padding: 13px 24px 13px 24px;

    &:hover {
      background-color: var(--td-bg-color-container-hover);

      .msg-date {
        display: none;
      }

      .msg-action {
        display: flex;
        align-items: center;

        &-icon {
          display: flex;
          align-items: center;
        }
      }
    }

    .t-tag.t-size-s {
      margin-right: @spacer-1;
      margin-left: 0;
    }
  }
  .title {
    font-size: 14px;
    font-weight: bold;
    color: var(--td-text-color-placeholder);
    text-align: left;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 10px;
  }
  .content {
    font-size: 14px;
    color: var(--td-text-color-placeholder);
    text-align: left;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 16px;
  }

  .unread {
    color: var(--td-text-color-primary);
  }

  .msg-action {
    display: none;

    .set-read-icon {
      margin-right: 24px;
    }
  }

  &__empty-list {
    min-height: 443px;
    padding-top: 170px;
    text-align: center;
    color: var(--td-text-color-primary);
  }
}


</style>
